<template>
  <div class="app-container">
    <el-form ref="postForm" :model="postForm" :rules="rules">
      <div class="manage">
        <el-form-item>
          <label>添加联系人:</label>
          <el-input v-model="postForm.desc" type="textarea" />
        </el-form-item>
        <el-form-item prop="content" class="tinymce">
          <Tinymce ref="editor" v-model="postForm.content" />
        </el-form-item>
      </div>
    </el-form>
    <div class="exec">
      <div style="margin: 10px 0;"><el-button size="small" type="success" plain>添加</el-button>&nbsp;批量导入</div>
      <div class="colo">
        1、必须是excel格式,详情请参照模版sheet1<br>
        2、格式不能有误<br>
        3、记录要挨着输入，不能有空行<br>
        4、导入excel批量导入示例模版下载<br>
      </div>
      <el-upload
        style="margin-top: 10px ;"
        action="https://jsonplaceholder.typicode.com/posts/"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传</el-button><span></span>
        <div slot="tip" class="el-upload__tip">必须是excel格式,格式不能有误</div>
      </el-upload>
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { validURL } from '@/utils/validate'
import Upload from '@/components/Upload/SingleImage3'
const defaultForm = {
  status: 'draft',
  title: '', // 文章题目
  desc: '', // 联系人
  content: '', // 文章内容
  content_short: '', // 文章摘要
  source_uri: '', // 文章外链
  image_uri: '', // 文章图片
  display_time: undefined, // 前台展示时间
  id: undefined,
  platforms: ['a-platform'],
  comment_disabled: false,
  importance: 0
}
export default {
  name: 'ClipboardDemo',
  // eslint-disable-next-line vue/no-unused-components
  components: { Tinymce, Upload },
  data() {
    const validateRequire = (rule, value, callback) => {
      if (value === '') {
        this.$message({
          message: rule.field + '为必传项',
          type: 'error'
        })
        callback(new Error(rule.field + '为必传项'))
      } else {
        callback()
      }
    }
    const validateSourceUri = (rule, value, callback) => {
      if (value) {
        if (validURL(value)) {
          callback()
        } else {
          this.$message({
            message: '外链url填写不正确',
            type: 'error'
          })
          callback(new Error('外链url填写不正确'))
        }
      } else {
        callback()
      }
    }
    return {
      postForm: Object.assign({}, defaultForm),
      loading: false,
      userListOptions: [],
      rules: {
        image_uri: [{ validator: validateRequire }],
        title: [{ validator: validateRequire }],
        content: [{ validator: validateRequire }],
        source_uri: [{ validator: validateSourceUri, trigger: 'blur' }]
      }
    }
  }
}
</script>
<style>
.manage{
  display: flex;
  justify-content:space-around;
  align-content: center;
  flex-wrap: wrap;
}
.tinymce{
  width: 60%;
  margin: 30px auto;
}
.exec{
  margin-top: 30px;
  margin-left: 100px;
}
.colo{
  color: #b3450e;
}
</style>
